
 .banner{
     position: relative;
     width: 100%;
     height: 700px;
    
	/* background-color: #ffffff; */
    /* background-color: pink; */
    background: url(../IMG/banner.jpg) no-repeat ;
 }
 body{
   border-color: pink;
 }
 .banner .dot{
     position: absolute;
    
     left: 50%;
     margin-left: -60px;
     bottom: 20px;
     background-color:pink;
     /* width: fit-content; */
     width: 120px;
     overflow: hidden;
 }
 .banner span{
     float: left;
    width: 8px;
	height: 8px;
	background-color: #ffffff;
    border: 3px solid transparent;
    /* 剪裁背景 */
    /* 让背景色只填充内容区 */
    background-clip: content-box;
    border-radius: 50%;
    margin: 0 5px;
 }
  .dot span:hover{
    border-color: #fff;
    background-color: #668aca;
  }
  
   .dot span.active {
    background-color: #668aca;
    border-color: #fff;
  }

  /* 版心 */
.w {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    /* background-color: green; */
  }
    
     /* 设置公共的标题样式  */
     .title {
    }
    .title h2 {
      font-size: 30px;
      line-height: 29px;
      color: #767676;
    }
    .title p {
      font-size: 12px;
      line-height: 10px;
      margin: 6px 0;
      color: #767676;
    }
    .title .line-l {
      width: 60px;
      height: 1px;
      background-color: #a1a1a1;
      float: left;
    }
    .title .line-r {
      width: 300px;
      height: 1px;
      background-color: #a1a1a1;
      float: right;
    }
  /* 项目展示  */
.project {
    width: 100%;
    height: 573px;
    background-color: pink;
    margin-top: 120px;
  }
  .product {
    width: 100%;
    height: 1171px;
    background-color: orange;
  }
  .service {
    width: 100%;
    height: 932px;
   background-color: pink;
   
  }
  .news {
    width: 100%;
    height: 832px;
    /* background-color: orange; */
  }
  .about {
    width: 100%;
    height: 610px;
    background-color: pink;
  }
   
  .footer{
    width: 100%;
    height: 262px;
	  /* background-color: #f7f7f7; */
    /* background-color: chartreuse; */

  }
  /* 项目展示部分中间的标题 */
     .project .nav{
    width: 500px;
    height: 20px;
    /* background-color: pink; */
    line-height: 20px;
    /* margin-top没生效?/? */
    margin-top: 61px;
    margin-top: 0 auto;
    margin-left: 200px;
}
 
.nav .item{
    float: left;
    width: 40px;
    height: 16px;
    margin:0 20px;

}
.nav .line{
 /* float: right ; */
  width: 3px;
height: 10px;
background-color: #b5b5b5;
margin-top: 5px;
margin-right: 5px;
}
.nav .b{
   display: block;
 width: 12px;
height: 3px;
background-color: #668aca;
margin:0 auto;
margin-top: 3px;
}
.nav .item a{
font-size: 14px;
color: #767676;
}
.nav .b{
 opacity: 0;
}
.nav .item:hover .b{
opacity: 1;
}
.nav .item:hover a{
font-size: 16px;
color: #668aca;
}

/*  项目遮罩层*/
   .project .card{
  width: 360px;
height: 270px;
position: relative;

}
 .project .card .pic{
    width: 360px;
    height: 180px;
}
  .project .info .t{
    width: fit-content;
  height: 14px;
  line-height: 32px;
  font-size: 14px;
  color: #767676;
}
 .project .info .b{
    height: 13px;
  width: fit-content;
  font-size: 12px;
  line-height: 25px;
  color: #767676;
}
 .project .card .info{
   
    width: fit-content;
    height: 60px;
    margin-left: 62px;
    margin-bottom: 32px;
}
 .project .info .icon{
    position: absolute;
    right: 50px;
    bottom: 30px;
    float: right;
  width: 30px;
height: 30px;
border:  1px solid #767676;
opacity: 0.2;
}

 .project .card .mask{
position: absolute;
width: 360px;
height: 270px;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
opacity: 0;
border-radius: 8px;
}
 .project .mask p{
 margin-left: 50px;
 color: #ffffff;
}
.project .mask .title{
  font-size: 14px;
  line-height: 25px;
  /* margin-top: 58px; */
  /* margin容易出现崩塌 用padding设置 */
  padding-top: 58px;
}
 .project .mask .p1{
  font-size: 12px;
  line-height: 25px;
}
  .project .mask .p2{
  width: 252px;
height: 34px;
font-size: 12px;
line-height: 25px;
}
  .project .mask .more{
  width: 30px;
  height: 30px;
    position: absolute;
    bottom: 54px;
    right: 63px;
}

 /* 设置 hover 效果  */
  .project .card:hover .mask{
    opacity: 1;
}
 .project .card:hover .info{
    display: none;
}
  .project .list-item .img1{
    width: 360px;
    height: 180px;
  }
/* 项目展示的3个卡片 */
  .project .list{
    /* width: 1200px; */
    height: 280px;
    margin-top: 63px;
    /* margin-bottom: 116px; */
  }
.project .list .list-item{
  float: left;
  margin-right: 35px;
}
.project .list .list-item.mr0{
  margin-right: 0;
}


/* product部分 */

      .product .nav .t{
        font-size: 12px;
        line-height: 25px;
        color: #767676;
        width: fit-content;
        margin:0 auto;
      }
      .product .nav{
        text-align: center;
        /* width: 1000px; */
       width: 900px;
        height: 120px;
        /* margin-top: 60px; */
       margin:60px auto;
      }
      .product .nav .nav-item{
        width: 164px;
        height: 120px;
        /* background-color: pink; */
        float: left;

      }

  .product .nav .line{
        width: 16px;
	height: 1px;
	background-color: #668aca;
  margin:0 auto;
  opacity: 0;
      }
      .product .nav .nav-item:hover .line{
        opacity: 1;
      }
      .product .nav .nav-item:hover .t{
        font-size: 16px;
        color: #668aca;
      }
      .product .nav .nav-item:hover .icon{
        background-color: #668aca;
        border-radius: 5px;
      }

          .product .list{
            width: 100%;
            height:720px ;
            /* background-color: gray; */
          }
          .product .list .list-item{
           width: 360px;
           height: 360px;
           background-color:pink ; 
           float: left;
           margin-right: 28px;
           position: relative;
          }
          .product .list .list-item .t{
            font-size: 16px;
            color: #767676;
            line-height: 28px;
          }
          .product .list .list-item .b{
            font-size: 14px;
            color: #767676;

          }
          .product .list .list-item .desc{
            width: fit-content;
            height: 40px;
            text-align: center;
            margin:0 auto;
            
          }
          .product .list .list-item:hover .desc{
            display: none;
          }

          .product .list .list-item:hover .mask{
            display: block;
          }
          .product .list .list-item .mask{
            width: 360px;
	height: 320px;
	/* background-color: #000000; */
  background-color: rgba(0,0, 0, 0.2);
	border-radius: 8px;
	/* opacity: 0.5; */
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  display: none;

          }

          .product .list .mask .line{
            width: 80px;
	height: 2px;
	
   background-color: #f8f8f8;;
  display: inline-block;
          }
          .product .list .mask .xinxi{
            width: 350px;
            height: 100px;
            margin: 0 auto;
            margin-top: 100px;
          }
          .product .list .mask span{
            font-size: 30px;
            color: #f8f8f8;
            line-height: 25px;
          }
          .product .xinxi .t{
            font-size: 16px;
            line-height: 53px;
            color: #f8f8f8;
            margin-left: 69px;
          }
          .product .xinxi .b{

            font-size: 14px;
            margin-left: 69px;
            color: #f8f8f8;
          }
     /* 服务范围 */
  
    .service .box{
      width: 400px;
      height: 120px;
      /* background-color: pink; */
      position: absolute;
      left: 300px;
      top: 280px;
    }
    .service{
      position: relative;
      background-color: pink;
    }
    .service .box .t{
      width: 142px;
	height: 23px;
  font-size: 30px;
  line-height: 21px;
  color: #ffffff;
    }
    .service .box .b{
      width: 346px;
	height: 36px;
  font-size: 14px;
  line-height: 53px;
	color: #ffffff;
    }
    .service .nav{
      width: 1008px;
      height: 150px;
      border: solid 1px #f8f8f8;
      /* background-color:black; */
      text-align: center;
    position: absolute;
      right: 100px;
      bottom: 180px;

    }
    .service .nav .item{
      float: left;
      width: 250px;
	height: 150px;
	border:1px solid  #f8f8f8;
	opacity: 0.2;
  margin:0 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
    }
    .service .nav .item .p1{
      /* width: 64px;
	height: 16px; */
  width: 200px;
  font-size: 16px;
  line-height: 28px;
	color: #ffffff;
  margin: 0 auto
  /* padding-top:40px; */
  margin-top:40px;
    }
    .service .nav .item .p2{
      height: 10px;
      width: fit-content;
      font-size: 12px;

	line-height: 28px;

	color: #ffffff;
  margin-bottom: 20px;
    /* bottom: 20px; */
    }
    .service .nav .item .line{
      width: 30px;
      height: 1px;
      background-color: #ffffff;
      margin:0 auto;
      margin-top: 20px;
    }
    .service .nav .item:hover{
      background-color: burlywood;
      /* background-color: rgba(0, 0, 0, 0.9); */
    }
      /* 新闻 */
       
        .news .box{
          width: 570px;
          height: 570px;
          /* background-color:pink; */
          margin-top: 20px;
          float: left;
          /* display: inline-block; */
        }
         
          .news .card{
            width: 570px;
	height: 270px;
	background-color: #565656;
  position: relative;
          }
          .news .card .mask .icon img{
            width: 30px;
            height: 30px;
          }
          .news .card img{
            width: 570px;
            height: 270px;
          }
          .news .card .title{
            font-size: 16px;
            line-height: 40px;
            color: #ffffff;
            /* color: black; */
          }
          .news .card .desc{
            font-size: 12px;
            line-height: 25px;
            color: #ffffff;
            /* color: black; */

          }
          .news .card .mask{
            width: 570px;
    	  height: 90px;
	     
           background-color: rgba(0, 0, 0, 0.5);
           position: absolute;
           left:0;
           bottom:0;
           display: none;
           }
           .news .card:hover .mask{
             display: block;
           }

           .news .icon{
            width: 30px;
            height: 30px;
           }
            /* .news img{
              width: 30px;
              height: 30px;
            } */
           .news .left .icon img{
             width: 30px;
             height: 30px;
           }
           .news .card .mask .icon{
             width: 30px;
             height: 30px;
             position: absolute;
             right: 50px;
             bottom: 12px;

           }
           .news .card  .mask p{
             margin-left: 50px;
           }
           .news .left img{
            width: 270px;
            height: 270px;
           }
           .news .left{
            width: 270px;
            height: 270px;
            position: relative;
            /* display: inline-block; */
            float: left;
            margin-top: 20px;
           }
           .news .left .mask{
             width: 270px;
             height: 90px;
             background-color: rgba(0, 0, 0, 0.5);
             position: absolute;
             right: 0px;
             bottom:0px;
           }
           .news .left .icon{
             position: absolute;
             right: 20px;
             bottom: 3px;
           }
          .news .left p{
           margin-left:8px;
           font-size: 10px;
           line-height: 15px;
           color: #ffffff;
          }
          .news .left .mask{
            display: none;
          }
        .news .left:hover .mask{
          display: block;
        }
            .news .box .right{
              float: right;
              width: 270px;
              height: 270px;
              margin-top: 20px;
              /* display: inline-block; */
              position: relative;
            }
            .news .right p{
              margin-left:8px;
           font-size: 10px;
           line-height: 15px;
           color: #ffffff;
            }
            .news .right .mask{
              width: 270px;
              height: 90px;
              position: absolute;
              left: 0;
              bottom: 0;
              display: none;
              background-color: rgba(0, 0, 0, 0.5);
            }
            .news .right .mask .icon{
              position: absolute;
              right: 10px;
              bottom: 3px;
            }
            .news .right:hover .mask{
              display: block;
              
            }
            
                /*并列的box2盒子  */
             .news .box2{
                width: 570px;
	height: 570px;
  /* background-color: pink; */
  float: right;
  margin-top: 20px;
  position: relative;
              }
   
              .news .box2 .title{
                font-size: 16px;
                line-height: 40px;
                color: #ffffff;
                margin-left: 50px;
                /* color: black; */
              }
              .news .box2 .desc{
                font-size: 12px;
                line-height: 25px;
                color: #ffffff;
                margin-left: 50px;
                /* color: black; */
    
              }
              .news .con{
                width: 100%;
                height: 590px;
               
                margin-top: 80px;
              }
              .news .box2 img{
                width: 570px;
                height: 570px;
              }
              .news .box2 .icon img{
                width: 30px;
                height: 30px;
              }
             .news .box2 .mask{
              width: 570px;
              height: 90px;
              position: absolute;
              background-color: rgba(0, 0, 0, 0.5);
              position: absolute;
              left:0;
              bottom:0;
             opacity: 0;
             }
             .news .box2:hover .mask{
               opacity: 1;
             }
             .news .box2 .icon{
               position: absolute;
               right: 5px;
               bottom: 5px;
             }
         /* 关于简设 */

       .about .box .pic{
         float: left;
         /* display: inline-block; */
        width: 500px;
        height: 300px;
        background-color: #767676;
       } 
         
        .about .info .t{
          width: 672px;
       	/* height: 63px; */
         line-height: 53px;
          font-size: 12px;
          color: #767676;

        }
        .about .info .m{
          width: 662px;
	       height: 38px;
          font-size: 12px;
          line-height: 25px;
          color: #767676;

        }
        .about .info .b{
          width: 674px;
        	height: 63px;
          font-size: 12px;
          line-height: 25px;
          color: #767676;
        }
        .about .info{
          float: right;
          width: 678px;
          height: 300px;
        }
         .about .box{
           width: 1200px;
           height: 450px;

           margin-top: 80px;
         }
   
